<template>
  <div class="login-form">
    <span>用户：</span><input type="text" v-model="data.user.username" />
    <span>密码：</span> <input type="password" v-model="data.user.pwd" />
    <br />
    <button @click="login">登录</button>
  </div>
</template>

<script setup lang="ts">
import { reactive } from "vue";
import { useStore } from "../store/index";

const store = useStore();

const data = reactive({
  user: {
    username: "",
    pwd: "",
  },
});

function login() {
  //调用pinia中的登录函数
  store.login(data.user.username, data.user.pwd);
}
</script>

<style scoped>
.login-form {
  display: flex;
  flex-direction: column;
  width: 300px;
  padding: 20px;
  margin: 50px auto;
  box-shadow: 0 0 5px #ccc;
}
</style>
